<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东会员注册</title>
    <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/register.css">
    <script src="./lib/axios.js"></script>
</head>

<body>

    <div class="header">
        <div class="headerC">
            <div>
                <img src="./images/nav01-jingdong.png" alt="">
                <p>欢迎注册</p>
            </div>
            <div>
                <p>已有账号？</p>
                <p class="logo">请登录></p>
            </div>
        </div>
    </div>

    <div class="register">
        <div class="alert alert-primary" role="alert">
            response: 若注册成功 , 则3秒后自动跳转登录界面 ~.~
        </div>
        <div class="mb-3 row">
            <label for="staticEmail" class="col-sm-2 col-form-label">用户名:</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" placeholder="请设置用户名" aria-label="default input example">
            </div>
        </div>
        <div class="mb-3 row">
            <label for="inputPassword" class="col-sm-2 col-form-label">密　码:</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="设置密码">
            </div>
        </div>
        <div class="mb-3 row">
            <label for="inputPassword" class="col-sm-2 col-form-label">确认密码:</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" placeholder="重新确认密码">
            </div>
        </div>
        <div class="mb-3 row">
            <label for="staticEmail" class="col-sm-2 col-form-label">昵　称:</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" placeholder="请设置昵称" aria-label="default input example">
            </div>
        </div>
        <div class="btn">
            <button type="button" class="btn btn-primary">提交</button>
        </div>
    </div>

    <div class="footer">
        <div class="footerC">
            <ul>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">人才招聘</a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">广告服务</a></li>
                <li><a href="#">手机京东</a></li>
                <li><a href="#">友情链接</a></li>
                <li><a href="#">销售联盟</a></li>
                <li><a href="#">京东社区</a></li>
                <li><a href="#">京东公益</a></li>
            </ul>
            <p>
                Copyright&copy;2004-
                <script>document.write(new Date().getFullYear())</script>
                京东JD.com 版权所有
            </p>
        </div>
    </div>

    <script>
        let logo = document.querySelector('.logo');

        logo.style.cursor = 'pointer';

        logo.onclick = function () {
            location.href = '02-login.html';
        }

        let inputs = document.querySelectorAll('.form-control');
        let btn = document.querySelector('.btn');
        let alerts = document.querySelector('.alert');
        // let timer = 0;

        btn.onclick = function () {
            let data = {
                username: inputs[0].value.trim(),
                password: inputs[1].value.trim(),
                rpassword: inputs[2].value.trim(),
                nickname: inputs[3].value.trim(),
            }

            axios({
                method: 'post',
                url: 'http://localhost:8888/users/register',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data
            }).then(res => {
                let code = res.data.code;
                // console.log(res);
                if (code == 1) {
                    let count = 4;
                    let timer = setInterval(() => {
                        alerts.innerHTML = `response: 注册成功,${--count}秒钟后自动跳转登录界面 ~.~`;
                        if (count === 0) {
                            location.href = '02-login.html';
                            clearInterval(timer);
                        }
                    }, 1000);
                } else {
                    alerts.innerHTML = `response: 注册失败 !!! <p style="color:red;">${res.data.message}!!!</p>`;
                }
            })

        }

    </script>
</body>

</html>